<template>
  <tr>
    <th>
       <input type="checkbox" v-model="goods.checked" @click="selectCb"/>
    </th>
    <th>{{good.name}}</th>
    <th>{{good.price}}</th>
    <th>
      <button @click="decrease" :style="{'disabled':isDisabled}">-</button>
      {{good.num}}
      <button @click="increase">+</button>
    </th>
    <th>{{total}}</th>
    <th>
      <button @click="deleteTr">删除</button>
    </th>
  </tr>
</template>

<script>
export default {
  name: 'CartTr',
  props: {
    goods: {
      type: Object
    }
  },
  data(){
    return {
      good: this.goods,
      isDisabled: false,
    }
  },

  methods: {
    increase(){
      this.good.num++
    },
    decrease(){
      if (this.good.num <= 0) {
        this.isDisabled = true;
      }else{
        this.good.num--
      }
    },
    deleteTr(){
      this.$emit('deleteTr');
    },
    selectCb(){
      this.$emit('selectCb');
    }
  },
  computed: {
    total(){
      return this.good.price * this.good.num;
    }
  },
}
</script>

<style>

</style>